<script lang="ts">
import { defineComponent, reactive, ref } from "vue";

import PopupBottom from "@/components/popup/bottom.vue";
import FormButton from "@/components/form/button.vue";

export default defineComponent({
  components: { PopupBottom, FormButton },
  props: {
    price: [String, Number],
  },
  setup(props) {
    let pickerCallback: ((id: string) => void) | undefined = undefined;

    const visible = ref(false);

    const sepcList = ref<any[]>([]);
    const specData = reactive({ id: "", price: "", name: "" });
    const specClick = (index: number) => {
      const spec = sepcList.value[index];
      if (spec.status !== 1) return;
      specData.id = spec.specs_id;
      specData.name = spec.name;
      specData.price = spec.price;
    };
    const confirmClick = () => {
      if (!specData.id) return;
      pickerCallback?.(specData.id);
      visible.value = false;
    };

    const show = (listData: any[], callback: (id: string) => void) => {
      sepcList.value = listData;
      if (listData.length === 1) specClick(0);

      visible.value = true;
      pickerCallback = callback;
    };
    return { visible, sepcList, specData, specClick, confirmClick, show };
  },
});
</script>

<template>
  <PopupBottom v-model="visible">
    <view class="spec-picker">
      <view class="spec-picker-info">
        <view class="spec-picker-price">
          <view class="spec-picker-price2">¥</view>{{ specData.price || price }}
        </view>
        <view class="spec-picker-name">已选：{{ specData.name }}</view>
      </view>
      <view class="spec-picker-line"></view>
      <view class="spec-picker-title">套餐规格</view>
      <view class="spec-picker-data">
        <view
          class="spec-picker-item"
          :class="{ 'spec-picker-active': specData.id === i.specs_id }"
          v-for="(i, d) of sepcList"
          :key="i.specs_id"
          @click="specClick(d)"
        >
          {{ i.name }}
        </view>
      </view>
      <view class="spec-picker-btn" @click="confirmClick">
        <FormButton :disabled="!specData.id">下一步</FormButton>
      </view>
    </view>
  </PopupBottom>
</template>

<style lang="scss">
.spec-picker {
  padding-top: 10rpx;
  padding-bottom: 16rpx;

  .spec-picker-info {
    display: flex;
    align-items: center;
    margin: 0 30rpx 20rpx;
  }

  .spec-picker-price {
    display: flex;
    align-items: flex-end;
    font-size: 48rpx;
    color: #ff4d42;
    line-height: 64rpx;
    font-weight: bold;
    letter-spacing: -1rpx;
  }

  .spec-picker-price2 {
    width: 30rpx;
    font-size: 36rpx;
    line-height: 58rpx;
  }

  .spec-picker-name {
    flex-grow: 1;
    min-width: 0;
    margin-left: 10rpx;
    margin-top: 8rpx;
    font-size: 26rpx;
    color: #666666;
    line-height: 42rpx;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .spec-picker-line {
    margin: 0 30rpx 40rpx;
    border-bottom: 2rpx solid #c3c3c3;
  }

  .spec-picker-title {
    padding-left: 30rpx;
    margin-bottom: 40rpx;
    font-size: 32rpx;
    color: #333333;
    line-height: 48rpx;
    font-weight: bold;
  }

  .spec-picker-data {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    min-height: 220rpx;
    padding-left: 30rpx;
    margin-bottom: 14rpx;
  }

  .spec-picker-item {
    padding: 0 18rpx;
    margin-right: 30rpx;
    margin-bottom: 20rpx;
    font-size: 28rpx;
    color: #666666;
    line-height: 60rpx;
    border-radius: 10rpx;
    border: 2rpx solid #999999;
  }

  .spec-picker-active {
    color: #ff7900;
    border-color: #ff7900;
  }

  .spec-picker-btn {
    margin: 0 60rpx;
  }
}
</style>
